<template>
    <div class="itemMusicList">
        <div class="itemListTop">
            <div class="listLeft">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofanganniu"></use>
                </svg>
                <span>播放全部({{itemlist.length}}首)</span>
                <span></span>
            </div>
            <div class="listRight">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiahao"></use>
                </svg>
                <span>收藏({{subscribedCount}})</span>
            </div>
        </div>

        <div class="itemList">
            <div class="item" v-for="(item,i) in itemlist" :key="i">
                <div class="itemLeft" @click="playMusic(i)">
                    <span class="leftSpan">{{i+1}}</span>
                    <div>
                        <p>{{item.name}}</p>
                        <span v-for="(item1,index) in item.ar" :key="index">{{item1.name}}</span>
                    </div>
                </div>
                <div class="itemRight">
                    <svg class="icon bofang" aria-hidden="true" v-if="item.mv !=0">
                        <use xlink:href="#icon-shipin"></use>
                    </svg>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31liebiao"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>

</template>

<script>

import { mapMutations } from 'vuex'



export default ({
    setup(props) {
        console.log(props)
    },
    props: ['itemlist', 'subscribedCount'],
    methods: {
        ...mapMutations(['updatePlayList', 'updatePlayListIndex',]),
        playMusic(i) {
            this.updatePlayList(this.itemlist)
            this.updatePlayListIndex(i)
        },

    }
})
</script>

<style lang="less" scoped>
.itemMusicList {
    width: 100%;
    // height: 10rem;
    background-color: #fff;
    padding: 0 0.2rem;
    margin-top: 0.2rem;
    border-top-left-radius: .4rem;
    border-top-right-radius: .4rem;

    .itemListTop {
        width: 100%;
        height: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: .24rem;

        .listLeft {
            width: 3rem;
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            span {
                font-weight: 700;
            }
        }

        .listRight {
            width: 2rem;
            height: 80%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: red;
            border-radius: 30px;

            .icon {
                width: .3rem;
                height: .3rem;
                fill: #fff // 填充颜色
            }

            span {
                font-size: .24rem;
                color: #fff;
            }
        }
    }

    .itemList {
        width: 100%;
        height: 20rem;
        display: flex;
        flex-direction: column;

        .item {
            width: 100%;
            height: .9rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: .12rem 0;

            .itemLeft {
                width: 80%;
                height: .9rem;
                display: flex;
                justify-content: space-around;
                align-items: center;

                div {
                    width: 85%;
                    height: 100%;
                    // padding-left: .4rem;
                    // background-color: orange;
                    white-space: nowrap; //让文本不换行，在同一行里面
                    overflow: hidden; //让超出的范围进行隐藏
                    text-overflow: ellipsis; //超出的部分用省略号表示


                    p {
                        display: block;
                        width: 100%;
                        height: .3rem;
                        font-size: .3rem;
                        font-weight: 700;
                        margin-bottom: .1rem;
                    }

                    span {
                        // display: flex;
                        // background-color: aqua;
                        width: 100%;

                        // height: .24rem;
                        font-size: .24rem;
                    }
                }

            }

            .itemRight {
                width: 20%;
                height: 100%;
                display: flex;
                justify-content: flex-end;
                align-items: center;

                svg {
                    fill: rgb(115, 106, 106);
                    width: .5rem;
                    height: .5rem;
                    padding-right: .05rem;
                }
            }
        }
    }
}
</style>